ARIA-Zustände und -Eigenschaften (Attribute)

Diese Seite listet Referenzseiten auf, die alle auf MDN besprochenen WAI-ARIA-Attribute abdecken.

ARIA-Attribute ermöglichen es, die Zustände und Eigenschaften eines Elements zu ändern, wie im Accessibility-Tree definiert.

Hinweis: ARIA ändert nur den Accessibility-Tree, indem es beeinflusst, wie assistive Technologie den Inhalt Ihren Nutzern präsentiert. ARIA ändert nichts an der Funktion oder dem Verhalten eines Elements. Wenn semantische HTML-Elemente nicht für ihren beabsichtigten Zweck und ihre Standardfunktionalität verwendet werden, müssen Sie JavaScript verwenden, um Verhalten, Fokus und ARIA-Zustände zu verwalten.

ARIA-Attributtypen

Es gibt 4 Kategorien von ARIA-Zuständen und -Eigenschaften:

Live-Region-Attribute

Drag-and-Drop-Attribute

Beziehungs-Attribute

Globale ARIA-Attribute

Einige Zustände und Eigenschaften gelten für alle HTML-Elemente, unabhängig davon, ob eine ARIA-Rolle angewendet wird. Diese werden als "Globale" Attribute definiert. Globale Zustände und Eigenschaften werden von allen Rollen und grundlegenden Markup-Elementen unterstützt.

Viele der oben genannten Attribute sind global, was bedeutet, dass sie, sofern nicht ausdrücklich ausgeschlossen, in jedes Element eingefügt werden können:

Mit "ausdrücklich ausgeschlossen" sind alle oben genannten Attribute global, außer den Eigenschaften aria-label und aria-labelledby, die nicht auf Elemente mit der Rolle presentation oder ihrem Synonym none angewendet werden dürfen.

Index der Zustände und Eigenschaften

Die folgenden sind die Referenzseiten, die die auf WAI-ARIA-Zustände und Eigenschaften auf MDN beschreiben.

ARIA: aria-activedescendant-Attribut: Das aria-activedescendant-Attribut identifiziert das aktuell aktive Element, wenn der Fokus auf einem composite Widget, einer combobox, einer textbox, einer group oder einer application liegt.
ARIA: aria-atomic Attribut: In ARIA Live-Regionen gibt das globale aria-atomic Attribut an, ob unterstützende Technologien wie ein Screenreader den gesamten geänderten Bereich oder nur Teile davon präsentieren, basierend auf den Änderungsbenachrichtigungen, die durch das aria-relevant Attribut definiert sind.
ARIA: aria-autocomplete-Attribut: Das aria-autocomplete-Attribut gibt an, ob die Eingabe von Text bei einer combobox, searchbox oder textbox die Anzeige einer oder mehrerer Vorhersagen des gewünschten Werts des Benutzers auslösen könnte und wie die Vorhersagen präsentiert werden, falls sie gemacht werden.
ARIA: aria-braillelabel Attribut: Das globale aria-braillelabel Attribut definiert einen Zeichenfolgenwert, der das aktuelle Element kennzeichnet und in Braille umgewandelt werden soll.
ARIA: aria-brailleroledescription Attribut: Das globale aria-brailleroledescription-Attribut definiert eine menschenlesbare und vom Autor lokalisierte abgekürzte Beschreibung für die Rolle eines Elements, die in Braille konvertiert werden soll.
ARIA: aria-busy-Attribut: Das globale aria-busy-Attribut, das in ARIA-Live-Bereichen verwendet wird, gibt an, dass ein Element gerade bearbeitet wird, und dass unterstützende Technologien möglicherweise warten möchten, bis die Änderungen abgeschlossen sind, bevor sie den Benutzer über das Update informieren.
ARIA: aria-checked Attribut: Das aria-checked Attribut gibt den aktuellen "checked"-Zustand von Kontrollkästchen, Optionsfeldern und anderen Widgets an.
ARIA: aria-colcount-Attribut: Das aria-colcount-Attribut definiert die Gesamtanzahl der Spalten in einer table, grid oder treegrid, wenn nicht alle Spalten im DOM vorhanden sind.
ARIA: aria-colindex Attribut: Das aria-colindex Attribut definiert den Spaltenindex oder die Position eines Elements in Bezug auf die Gesamtzahl der Spalten innerhalb eines table, grid oder treegrid.
ARIA: aria-colindextext Attribut: Das aria-colindextext Attribut definiert einen menschenlesbaren Text als Alternative zum numerischen aria-colindex.
ARIA: aria-colspan-Attribut: Das aria-colspan-Attribut definiert die Anzahl der Spalten, die von einer Zelle oder einem gridcell in einer table, einem grid oder einem treegrid überspannt werden.
ARIA: aria-controls-Attribut: Das globale aria-controls-Attribut identifiziert das Element (oder die Elemente), dessen Inhalte oder Vorhandensein durch das Element kontrolliert werden, an dem dieses Attribut gesetzt ist.
ARIA: aria-current Attribut: Ein nicht-nullwertiger aria-current Status auf einem Element zeigt an, dass dieses Element das aktuelle Element innerhalb eines Containers oder einer Menge verwandter Elemente repräsentiert.
ARIA: aria-describedby-Attribut: Das globale aria-describedby-Attribut identifiziert das Element (oder die Elemente), das das Element beschreibt, auf dem das Attribut gesetzt ist.
ARIA: aria-description Attribut: Das globale aria-description Attribut definiert einen Zeichenfolgenwert, der das aktuelle Element beschreibt oder annotiert.
ARIA: aria-details-Attribut: Das globale aria-details-Attribut identifiziert das Element (oder die Elemente), die zusätzliche Informationen in Bezug auf das Objekt bereitstellen.
ARIA: aria-disabled Attribut: Der aria-disabled Zustand zeigt an, dass das Element wahrnehmbar, aber deaktiviert ist, sodass es nicht bearbeitet oder anderweitig bedient werden kann.
ARIA: aria-dropeffect-Attribut: Das globale aria-dropeffect-Attribut gibt an, welche Funktionen ausgeführt werden können, wenn ein gezogenes Objekt auf dem Ziel abgelegt wird.
ARIA: aria-errormessage Attribut: Das aria-errormessage Attribut an einem Objekt identifiziert das bzw. die Elemente, die eine Fehlermeldung für dieses Objekt bereitstellen.
ARIA: aria-expanded Attribut: Das aria-expanded Attribut wird auf ein Element gesetzt, um anzugeben, ob ein Steuerelement erweitert oder zusammengeklappt ist und ob die gesteuerten Elemente angezeigt oder verborgen sind.
ARIA: aria-flowto-Attribut: Das globale aria-flowto-Attribut identifiziert das nächste Element (oder die nächsten Elemente) in einer alternativen Lesereihenfolge von Inhalten. Dadurch kann unterstützende Technologie die allgemeine voreingestellte Lesereihenfolge im Dokument nach eigenem Ermessen überschreiben.
ARIA: aria-grabbed-Attribut: Der aria-grabbed-Zustand zeigt den "gegriffenen" Zustand eines Elements in einer Drag-and-Drop-Operation an.
ARIA: aria-haspopup-Attribut: Das aria-haspopup-Attribut gibt die Verfügbarkeit und den Typ eines interaktiven Popup-Elements an, das durch das Element, auf dem das Attribut gesetzt ist, ausgelöst werden kann.
ARIA: aria-hidden-Attribut: Der aria-hidden-Zustand gibt an, ob das Element einer Zugänglichkeits-API verfügbar gemacht wird.
ARIA: aria-invalid Attribut: Der aria-invalid Zustand zeigt an, dass der eingegebene Wert nicht dem von der Anwendung erwarteten Format entspricht.
ARIA: aria-keyshortcuts-Attribut: Das globale aria-keyshortcuts-Attribut gibt Tastenkombinationen an, die ein Autor implementiert hat, um ein Element zu aktivieren oder den Fokus darauf zu setzen.
ARIA: aria-label Attribut: Das aria-label-Attribut definiert einen Zeichenfolgewert, der verwendet werden kann, um ein Element zu benennen, solange die Rolle des Elements nicht Naming verbietet.
ARIA: aria-labelledby-Attribut: Das aria-labelledby-Attribut identifiziert das Element (oder die Elemente), die das Element kennzeichnen, auf das es angewendet wird.
ARIA: aria-level Attribut: Das aria-level Attribut definiert die hierarchische Ebene eines Elements innerhalb einer Struktur.
ARIA: aria-live Attribut: Das globale aria-live Attribut zeigt an, dass ein Element aktualisiert wird, und beschreibt die Art der Aktualisierungen, die von den Benutzeragenten, unterstützenden Technologien und dem Benutzer von der Live-Region erwartet werden können.
ARIA: aria-modal Attribut: Das aria-modal Attribut gibt an, ob ein Element modal ist, wenn es angezeigt wird.
ARIA: aria-multiline Attribut: Das aria-multiline Attribut gibt an, ob ein textbox mehrere Zeilen Eingabe akzeptiert oder nur eine einzelne Zeile.
ARIA: aria-multiselectable-Attribut: Das aria-multiselectable-Attribut gibt an, dass der Benutzer mehr als ein Element aus den aktuellen auswählbaren Nachkommen auswählen kann.
ARIA: aria-orientation-Attribut: Das aria-orientation-Attribut gibt an, ob die Orientierung des Elements horizontal, vertikal oder unbekannt/mehrdeutig ist.
ARIA: aria-owns-Attribut: Das aria-owns-Attribut identifiziert ein Element (oder Elemente), um eine visuelle, funktionale oder kontextuelle Beziehung zwischen einem übergeordneten Element und dessen untergeordneten Elementen zu definieren, wenn die DOM-Hierarchie zur Darstellung der Beziehung nicht verwendet werden kann.
ARIA: aria-placeholder-Attribut: Das aria-placeholder-Attribut definiert einen kurzen Hinweis (ein Wort oder eine kurze Phrase), der dem Benutzer bei der Dateneingabe helfen soll, wenn ein Formularelement keinen Wert hat. Der Hinweis kann ein Beispielwert oder eine kurze Beschreibung des erwarteten Formats sein.
ARIA: aria-posinset Attribut: Das aria-posinset Attribut definiert die Nummer oder Position eines Elements in der aktuellen Gruppe von Listenelementen oder Baumelementen, wenn nicht alle Elemente im DOM vorhanden sind.
ARIA: aria-readonly-Attribut: Das aria-readonly-Attribut gibt an, dass das Element nicht bearbeitbar ist, aber dennoch bedienbar bleibt.
ARIA: aria-relevant Attribut: Verwendet in ARIA-Live-Regionen zeigt das globale aria-relevant Attribut an, welche Benachrichtigungen der User-Agent auslöst, wenn der Zugänglichkeitsbaum innerhalb einer Live-Region modifiziert wird.
ARIA: aria-required-Attribut: Das aria-required-Attribut gibt an, dass Benutzereingaben im Element erforderlich sind, bevor ein Formular abgesendet werden kann.
ARIA: aria-roledescription-Attribut: Das aria-roledescription-Attribut definiert eine für Menschen lesbare und vom Autor lokalisierte Beschreibung für die Rolle eines Elements.
ARIA: aria-rowcount-Attribut: Das aria-rowcount-Attribut definiert die Gesamtanzahl der Zeilen in einer Tabelle, einem Raster oder einem Baumraster.
ARIA: aria-rowindex-Attribut: Das aria-rowindex-Attribut definiert die Position eines Elements in Bezug auf die Gesamtanzahl der Zeilen innerhalb einer Tabelle, eines Rasters oder eines Baumgitters.
ARIA: aria-rowindextext Attribut: Das aria-rowindextext Attribut definiert eine menschenlesbare Textalternative zu aria-rowindex.
ARIA: aria-rowspan Attribut: Das aria-rowspan Attribut definiert die Anzahl der von einer Zelle oder Gridcell innerhalb einer Tabelle, eines Grids oder Treegrids überspannten Reihen.
ARIA: aria-selected Attribut: Das aria-selected Attribut zeigt den aktuellen "ausgewählten" Zustand verschiedener Widgets an.
ARIA: aria-setsize-Attribut: Das aria-setsize-Attribut definiert die Anzahl der Elemente im aktuellen Satz von Listenelementen oder Baumelementen, wenn nicht alle Elemente des Satzes im DOM vorhanden sind.
ARIA: aria-sort-Attribut: Das aria-sort-Attribut zeigt an, ob Elemente in einer Tabelle oder einem Raster in aufsteigender oder absteigender Reihenfolge sortiert sind.
ARIA: aria-valuemin Attribut: Das aria-valuemin Attribut definiert den minimal erlaubten Wert für ein Bereichs-Widget.
ARIA: aria-valuenow-Attribut: Das aria-valuenow-Attribut definiert den aktuellen Wert für ein range-Widget.
ARIA: aria-valuetext-Attribut: Das aria-valuetext-Attribut definiert den menschenlesbaren Text als Alternative zu aria-valuenow für ein Bereichs-Widget.
ARIA: Attribut aria-pressed: Das Attribut aria-pressed gibt den aktuellen "gedrückten" Zustand eines Umschaltknopfs an.
ARIA: Attribut aria-valuemax: Das Attribut aria-valuemax definiert den maximal zulässigen Wert für ein Range-Widget.

Siehe auch

Verwendung von ARIA: Rollen, Zustände und Eigenschaften